<template>
  <div>
     <h2>欢迎光临vue开发的收银系统水果店</h2>
     <div>
        <p>苹果 <span>10</span>￥/斤，折扣&lt; <span>8</span>折 &gt;</p>
        <p>请输入你想购买的斤数：<input type="text" v-model.number="num"></p>
        <p><button @click="delsum">结账买单</button></p>
        <p>结账单：总价： <span>{{sum}}</span>￥元，折后价： <span>{{lastsum}}</span>￥元，省了 <span>{{reduce}}</span>￥元</p>
     </div>
   </div>
</template>
 
<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      num:0,
      sum:0,
      lastsum:0,
      reduce:0,
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    delsum(){
      this.sum=10*this.num,
      this.lastsum=8*this.num,
      this.reduce=this.sum-this.lastsum
    }
  }
};
</script>

<style scoped>
    div{
      width: 600px;
      margin: 0 auto;
    }
     p{
      margin: 0;
      height: 30px;
      width: 600px;
      line-height: 30px;
      text-align: center;
     }
     h2{
      width: 600px;
      text-align: center;
     }
     input{
      width: 30px;
     }
</style>